<script>
import { 
  ElContainer, 
  ElAside, 
  ElMain,
  ElMenu,
  ElMenuItem
} from 'element-plus';

export default {
  components: {
    ElContainer, 
    ElAside, 
    ElMain,
    ElMenu,
    ElMenuItem
  }
}
</script>

<template>
  <el-container>
    <el-aside class="aside">
      <el-menu :router="true">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/basic">Basic</el-menu-item>
        <el-menu-item index="/animal">Animal</el-menu-item>
        <el-menu-item index="/longan">桂圆(龙眼)</el-menu-item>
        <el-menu-item index="/litchi">荔枝</el-menu-item>
        <el-menu-item index="/full/name">全名</el-menu-item>
        <el-menu-item index="/user/register">注册用户(假的)</el-menu-item>
        <el-menu-item index="/user/login">注册登录(假的)</el-menu-item>
        <el-menu-item index="/rose">玫瑰</el-menu-item>
        <el-menu-item index="/course/1001">课程1001</el-menu-item>
        <el-menu-item index="/course/2002">课程2002</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main class="main">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<style scoped>
.aside {
  background: #f4f4f4;
  height: 100vh;
}
</style>
